<!-- 弹窗透明底组件 -->
<template>
	<view>
		<view class="popup-window" v-if="isShow">
			<view
				class="popup-window-bg"
				:style="{
					'background-color': bgColor,
					opacity: transparency
				}"
				@touchstart="hide(clickCancel)"
			></view>
			<slot name="popup-content"></slot>
		</view>
	</view>
</template>

<script>
/**
 * @description 数字/身份证号键盘
 * slot:
 * 	popup-content:弹窗内容插槽
 * @property {String} 				bgColor			背景色;默认值：#000000
 * @property {Number, String} 		transparency	透明度;默认值：0.4
 * @property {Boolean, String} 		clickCancel		点击背景部分是否隐藏;默认值：false
 * @function show									显示弹窗
 * @function hide									隐藏弹窗
 * @example
 * */
export default {
	name: 'popup-window',
	data() {
		return {
			isShow: false
		};
	},
	props: {
		bgColor: {
			type: String,
			default: '#000000'
		},
		transparency: {
			type: [String, Number],
			default: '0.4'
		},
		clickCancel: {
			type: [String, Boolean],
			default: true
		}
	},
	methods: {
		show() {
			this.isShow = true;
		},
		hide(value = true) {
			if (!value) {
				return;
			}
			this.isShow = false;
		}
	}
};
</script>

<style lang="scss">
.popup-window {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0rpx;
	top: 0rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	.popup-window-bg {
		width: 100vw;
		height: 100vh;
		background-color: #000000;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		opacity: 0.4;
	}
}
</style>
